<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>登录页面</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/vantindex.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="js/vue.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
        }

        nav a:hover {
            background-color: #555;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        .content {
            padding: 20px;
            background: white;
            margin-top: 20px;
        }

        .promo, .order-form {
            background-color: #e9e9e9;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }

        .promo h2, .order-form h2 {
            margin-top: 0;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 15px; /* 可根据需要调整间距 */
        }
        .login-button {
            width: 100px; /* 或者你希望的其他宽度，如 100px, 200px 等 */
            margin-right: 30px;
        }

        #app {
            width: 95%;
            max-width: 390px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
            padding: 10px;
            margin-top: 100px;
            align-content: center;
        }
        .van-nav-bar__content {
            background-color: #3b5998;
            color: #fff;
            border: none;
        }

        .van-nav-bar__title {
            color: #fff;
        }

        .van-cell-group {
            margin-bottom: 20px;
        }

        .van-field__control {
            font-size: 16px;
        }
    </style>
</head>
<body>
<div id="app">
    <div
            style="width: 4px;
               height: 20px"></div>


    <div>

        <van-cell-group :style="{ color: '#1989fa'}">
            <van-nav-bar
                    title="欢迎使用开云智能管理系统"



            />

        </van-cell-group>

        <van-cell-group style="margin: 30px">


            <van-field v-model="username" label="账号" placeholder="请输入账号" clearable="true"/>
        </van-cell-group>

        <van-cell-group style="margin: 30px">
            <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>
        </van-cell-group>

        <div class="button-container" style="background-color:rgba(219,37,37,0);">
        <van-cell-group style="background-color: rgba(74,74,74,0)">

<!--            <van-button class="login-button" type="default" loading-text="正在进行加密安全登录..." loading-size="3" @click="onSubmit">登录</van-button>-->
            <van-button plain hairline type="info" style="margin: 15px; width: 100px" @click="onSubmit">登录</van-button>
            <van-button plain hairline type="info" style="margin: 15px; width: 100px">注册</van-button>

        </van-cell-group>
    </div>

    </div>


</div>

<script>
    new Vue({
        el: '#app',
        data: {
            username: "",
            password: ""
        },
        methods: {
            onSubmit() {

                // window.alert(this.username+this.password)
                const params = {
                    username: this.username,
                    password: this.password
                };

                axios.post("/login", params)
                    .then(response => {

                        console.log(response.data.code)
                        if (response.data.code === 1) {
                            // 登录成功

                            location.href="../html/AllMembers.html"

                        } else {
                            // 登录失败，显示错误信息
                            console.log(response.data.code);
                            window.alert(response.data.msg);
                            // 关闭loading

                        }
                    })
                    .catch(error => {
                        // 请求失败，显示错误信息
                        window.alert(error.response ? error.response.data.message : '请求失败');
                        console.error('请求失败:', error);

                    });
            }
        }
    });
</script>

</body>
</html>
